var mySwiper2 = new Swiper('.swiper-container', {
    autoplay: false,//自动滑动
    speed:500,//自动滑动开始到结束的时间（单位ms）
    loop:false,//开启循环
    loopedSlides:5,//在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。
    slidesPerView:'auto',//设置slider容器能够同时显示的slides数量(carousel模式)。另外，支持'auto'值，会根据容器container的宽度调整slides数目。
    effect:'coverflow',//可以实现3D效果的轮播,
    centeredSlides:true,//设定为true时，active slide会居中，而不是默认状态下的居左。
    coverflow:{
        rotate:0,//slide做3d旋转时Y轴的旋转角度。默认50。
        stretch:95,//每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
        depth:0,//slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
        modifier:1,//depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
        slideShadows:false //开启slide阴影。默认 true。
    },
    onSlideChangeEnd: function(swiper){
        $(".allImgList").each(function(index,item){
            // console.log(index)
            $(item).attr("src",imgList[index])
        })
        main.html2Canvas(swiper.activeIndex);
      }
});
var mySwiper = new Swiper('.swiper-container1', {
    autoplay: false,//自动滑动
    speed:500,//自动滑动开始到结束的时间（单位ms）
    loop:false,//开启循环
    slidesPerView: 5,
    spaceBetween: 10
});
// 切换榜单
function toggleRank(index){
    mySwiper2.slideTo(index, 500, false);
    changeClass(index);
}
$(".swiper-container1 .swiper-slide").on('click',function($event){
    toggleRank($(this).index())
    $(".allImgList").each(function(index,item){
        console.log(index)
        $(item).attr("src",imgList[index])
    })
    main.html2Canvas($(this).index());
})
function changeClass(index){
    $(".swiper-container1 .swiper-slide").siblings().children('.check').hide()
    $(".swiper-container1 .swiper-slide").eq(index).children('.check').show()
}

//定义查找元素方法
function getDom(selector) {
    return document.querySelector(selector);
}

var main = {
    //获取像素密度
    getPixelRatio:function(context){
        var backingStore = context.backingStorePixelRatio ||
                context.webkitBackingStorePixelRatio ||
                context.mozBackingStorePixelRatio ||
                context.msBackingStorePixelRatio ||
                context.oBackingStorePixelRatio ||
                context.backingStorePixelRatio || 1;
        return (window.devicePixelRatio || 1) / backingStore;
    },
    //绘制dom 元素，生成截图canvas
    html2Canvas: function (index) {
        var shareContent = getDom("#userInfo");
        var width = shareContent.offsetWidth; 
        var height = shareContent.offsetHeight;
        var offsetTop = shareContent.offsetTop; 
        var offsetLeft = shareContent.offsetLeft; 
        var canvas = document.createElement('canvas'); 
        var context = canvas.getContext('2d');
        // var scaleBy = main.getPixelRatio(context); 
        var scaleBy = 4
        canvas.width =(width+offsetLeft) * scaleBy;   
        canvas.height = (height + offsetTop+30) * scaleBy;
        context.scale(scaleBy, scaleBy);
        var opts = {
            dpi: window.devicePixelRatio * 4,
            allowTaint:true,//允许加载跨域的图片
            tainttest:true, //检测每张图片都已经加载完成
            scale:scaleBy, 
            canvas:canvas, //自定义 canvas
            logging: false, //日志开关，发布的时候记得改成false
            width:width, //dom 原始宽度
            height:height //dom 原始高度
        };
        var shareContent1 = getDom("#dateImgS");
        var width1 = shareContent1.offsetWidth; 
        var height1 = shareContent1.offsetHeight;
        var offsetTop1 = shareContent1.offsetTop; 
        var offsetLeft1 = shareContent1.offsetLeft; 
        var canvas1 = document.createElement('canvas'); 
        var context1 = canvas1.getContext('2d');
        
        canvas1.width =(width1 + offsetLeft1) * scaleBy;   
        canvas1.height = (height1 + offsetTop1) * scaleBy;
        context1.scale(scaleBy, scaleBy);
        var opts1 = {
            dpi: window.devicePixelRatio * 4,
            allowTaint:true,//允许加载跨域的图片
            tainttest:true, //检测每张图片都已经加载完成
            scale:scaleBy, 
            canvas:canvas1, //自定义 canvas
            logging: false, //日志开关，发布的时候记得改成false
            width:150, //dom 原始宽度
            height:300 //dom 原始高度
        };


        html2canvas(shareContent, opts).then(function (canvas) {
            const dataImg = new Image()
            dataImg.src = canvas.toDataURL('image/png')
            // var body = document.getElementsByTagName("body");
            // body[0].appendChild(canvas);
            // becomeImage(dataImg,scaleBy,index)
            html2canvas(shareContent1, opts1).then(function (canvas1) {
                const dataImg1 = new Image()
                dataImg1.src = canvas1.toDataURL('image/png')
                
                // var body = document.getElementsByTagName("body");
                // body[0].appendChild(canvas1);
                
                becomeImage(dataImg,scaleBy,index,dataImg1)
            });

           
        });
    }
};
main.html2Canvas(0);

var  imgList = ["./img/1.png","./img/2.png","./img/3.png","./img/4.png","./img/5.png","./img/6.png","./img/7.png"]



 function becomeImage(imgurl,scaleBy,index,dataImg1){
    var canvas = document.createElement('canvas'); 
    var context = canvas.getContext('2d');
    canvas.width = 750
    canvas.height = 1197
    var ctx = context
    //首先画上背景图
    var img = new Image();
    img.src = imgList[index];
    img.setAttribute("crossOrigin", 'Anonymous')
    var codeimg = imgurl
    // console.log(dataImg1.width,dataImg1.height)
    var times  = dataImg1
    img.onload = function() { //必须等待图片加载完成
    ctx.drawImage(img, 0, 0, 750, 1197); //绘制图像进行拉伸
    ctx.drawImage(codeimg, 10, 700,730,200);
    ctx.drawImage(times, 540, 20,175,430);
    //绘制完成,转为图片
    setTimeout(function() { //在ios上无法在画完之后取到整个画布内容，加了个settimeout
        $("#showImgs").attr("src",canvas.toDataURL("image/png",1.8))
        $(".allImgList").eq(index).attr("src",canvas.toDataURL("image/png"))
           
        }, 0)
    }


}
//最后运行代码
// main.init();




    